import React, { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input, Card, Space } from 'antd'
import styles from './index.module.scss'
type FieldType = {
  user: string
  username: string
  password: string
  password1: string
}
const Register: FC = () => {
  const router = useNavigate()
  const onSubmit = (values: any) => {
    console.log('Success:', values)
  }
  return (
    <div className={styles.container}>
      <Card
        title="注册"
        bordered={false}
        style={{ width: 500 }}
        headStyle={{ textAlign: 'center' }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 500 }}
          onFinish={onSubmit}
          autoComplete="off">
          <Form.Item<FieldType>
            label="昵称"
            name="user"
            rules={[{ required: true, message: '请输入!' }]}>
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入!' }]}>
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入!' }]}>
            <Input.Password />
          </Form.Item>
          <Form.Item<FieldType>
            label="确认密码"
            name="password1"
            dependencies={['password']} // 依赖项
            rules={[
              { required: true, message: '请输入!' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('两次密码不一致!'))
                },
              }),
            ]}>
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Button type="primary" onClick={() => router('/login')}>
                返回登录
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Register
